import 'package:flutter/material.dart';
import 'package:animations/animations.dart';

void main() {
  runApp(MaterialApp(
    title: 'Slider',
    debugShowCheckedModeBanner: false,
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: HomePage(),
  ));
}

class HomePage extends StatefulWidget {
  const HomePage({Key key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("共享轴动画"),
      ),
      body: buildBody(),
    );
  }

  List<String> list = [
    "assets/images/sp01.png",
    "assets/images/sp02.png",
    "assets/images/sp03.png",
    "assets/images/sp05.png",
    "assets/images/welcome.png",
    "assets/images/login_bg.webp",
  ];

  buildBody() {
    return Container(
      width: MediaQuery.of(context).size.width,
      padding: EdgeInsets.all(20),
      child: Column(
        children: [
          // 构建展示图片
          buildImage(),
          // 构建滑动的图片列表
          buildDotImage(),
        ],
      ),
    );
  }

  buildImage() {
    return Expanded(
      flex: 3,
      child: PageTransitionSwitcher(
        transitionBuilder: (Widget child, Animation<double> primaryAnimation,
            Animation<double> secondaryAnimation) {
          return SharedAxisTransition(
              child: child,
              animation: primaryAnimation,
              secondaryAnimation: secondaryAnimation,
              transitionType: SharedAxisTransitionType.scaled);
        },
        duration: Duration(milliseconds: 400),
        child: Container(
          key: UniqueKey(),
          child: Image.asset(
            list[currentIndex],
          ),
        ),
      ),
    );
  }

  int currentIndex = 0;
  ScrollController _scrollController = new ScrollController();

  buildDotImage() {
    return Expanded(
      flex: 1,
      child: Container(
        child: ListView.builder(
          controller: _scrollController,
          scrollDirection: Axis.horizontal,
          itemCount: list.length,
          itemBuilder: (BuildContext context, int index) {
            return Stack(
              alignment: Alignment.center,
              children: [
                GestureDetector(
                  onTap: () {
                    print(index);
                    int preIndex = currentIndex;
                    setState(() {
                      currentIndex = index;
                    });
                    double offset = _scrollController.offset;
                    if (index > 0 && index < list.length - 1) {
                      if (index > preIndex) {
                        _scrollController.animateTo(
                            offset + 140.0 + (currentIndex - index) * 140,
                            duration: Duration(milliseconds: 500),
                            curve: Curves.linear);
                      } else if (currentIndex == preIndex) {
                        // 不滑动
                      } else {
                        _scrollController.animateTo(offset - 140.0,
                            duration: Duration(milliseconds: 500),
                            curve: Curves.linear);
                      }
                    } else {
                      _scrollController.animateTo(offset - 140.0,
                          duration: Duration(milliseconds: 500),
                          curve: Curves.linear);
                    }
                  },
                  child: Container(
                    margin: EdgeInsets.only(left: 8, right: 8),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(
                          Radius.circular(10),
                        ),
                        border: Border.all(
                            color: currentIndex == index
                                ? Colors.red
                                : Colors.white,
                            width: 5)),
                    child: ClipRRect(
                      borderRadius: BorderRadius.all(
                        Radius.circular(6),
                      ),
                      child: Image.asset(list[index],
                          height: 100, width: 140, fit: BoxFit.fitWidth),
                    ),
                  ),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}
